<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>车型展示</title>
		<link rel="stylesheet" type="text/css" href="../css/basic.css">
		<link rel="stylesheet" type="text/css" href="../css/style.css">
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
		<style type="text/css">
			.appoint .car-appoint>h3 {
				height: 50px;
				line-height: 50px;
				font-size: 24px;
				padding-left: 10px;
				margin-bottom: 16px;
				background-color: #f1f0f0;
				color: #000000;
				border: 1px solid #CECECE;
			}

			.appoint .car-appoint .appoint-car-list {
				position: relative;
				float: left;
				box-sizing: border-box;
				width: calc(25% - 12px);
				margin-right: 16px;
				margin-bottom: 16px;
				text-align: center;
				border: 1px solid #CECECE;
			}

			.appoint .car-appoint .appoint-car-list:nth-child(4n) {
				margin-right: 0;
			}

			.appoint .car-appoint .appoint-car-list .img-box {
				width: 100%;
				height: 200px;
				overflow: hidden;
			}

			.appoint .car-appoint .appoint-car-list .img-box img {
				width: 100%;
			}

			.appoint .car-appoint .appoint-car-list p {
				height: 36px;
				line-height: 36px;
			}

			.appoint .car-appoint .appoint-car-list.active {
				border-color: #0075D8;
			}

			.appoint .car-appoint .appoint-car-list.active i {
				display: block;
				color: #0075D8;
			}

			.appoint .car-appoint .appoint-car-list i {
				position: absolute;
				bottom: 5px;
				right: 8px;
				display: none;
				font-size: 20px;
				font-weight: bold;
				color: #0075D8;
			}
			.infor{
				padding-top: 60px;
				padding-bottom: 100px;
				    text-align: center;
				border: 1px solid #CECECE;
			}
			.infor .info-list{
				margin-bottom: 20px;
			}
			.infor .info-list .info-left {
				float: left;
				text-align: right;
				width: 550px;
				margin-right: 10px;
				height: 30px;
				line-height: 30px;
			}
.infor .info-list .info-right {
				float: left;
				text-align: left;
				    height: 30px;
				    line-height: 30px;
			}
			.infor .info-list .info-right input[type = text],.infor .info-list .info-right input[type = number]{
				width: 232px;
				height: 30px;
				line-height: 30px;
				padding-left: 10px;
				border: 1px solid #CECECE;
			}
			.infor .info-list .rightselect{
				width: 242px;
				line-height: 30px;
				border: 1px solid #CECECE;
			}
			.infor .info-list .rightselect select{
				width:225px;
				padding-left: 10px;
				border: none;
			}
			.infor .info-list .rightselect select option{
				line-height: 30px;
			}
			.infor .info-list .rightselect .iconfont{
				float: right;
			}
			.infor .info-list input[type=radio] {
				float: left;
				    margin-top: 9px;
					margin-right: 5px;
				appearance: radio;
				-webkit-appearance: radio;
			}
			.infor .info-list span.radiospan{
				float: left;
				margin-right: 10px;
			}
			.submitInfor{
				width: 140px;
				height: 36px;
				line-height: 36px;
				margin: 0 auto;
				border-radius: 6px;
				border: 1px solid #CECECE;
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="index-content">
			<!-- 头部 -->
			<header>
				<div class="header-content width1300 clearfix">
					<div class="logo fl clearfix">
						<img src="../img/logo.png" class="fl" />
						<p class="fl">中成商务房车</p>
					</div>
					<div class="search fl">
						<input type="text" placeholder="请输入想要搜索的内容" class="fl" />
						<i class="iconfont icon-sousuo1 fr"></i>
					</div>
					<div class="telphone fr">
						<img src="../img/tel.png" />
						<div class="num">热线电话<b>400-079-6969</b></div>
					</div>
				</div>
				<div class="nav clearfix width1300">
					<div class="nav-list fl">首页</div>
					<div class="nav-list fl">选车中心</div>
					<div class="nav-list fl">推荐车系</div>
					<div class="nav-list fl">优惠资讯</div>
					<div class="nav-list fl">视频中心</div>
					<div class="nav-list fl">关于我们</div>
				</div>
			</header>
			<!-- 当季热销车 -->
			<div class="hot-carbuy appoint width1300">
				<div class="title">预约试驾</div>
				<div class="car-appoint">
					<h3>选择车系</h3>
					<div class="appoint-content clearfix">
						<div class="appoint-car-list">
							<div class="img-box">
								<img src="../img/car1.jpg" />
							</div>
							<p>奔驰v</p>
							<i class="iconfont icon-duihao"></i>
						</div>
						<div class="appoint-car-list active">
							<div class="img-box">
								<img src="../img/car1.jpg" />
							</div>
							<p>奔驰v</p>
							<i class="iconfont icon-duihao"></i>
						</div>
						<div class="appoint-car-list">
							<div class="img-box">
								<img src="../img/car1.jpg" />
							</div>
							<p>奔驰v</p>
							<i class="iconfont icon-duihao"></i>
						</div>
						<div class="appoint-car-list">
							<div class="img-box">
								<img src="../img/car1.jpg" />
							</div>
							<p>奔驰v</p>
							<i class="iconfont icon-duihao"></i>
						</div>
						<div class="appoint-car-list">
							<div class="img-box">
								<img src="../img/car1.jpg" />
							</div>
							<p>奔驰v</p>
							<i class="iconfont icon-duihao"></i>
						</div>
						<div class="appoint-car-list">
							<div class="img-box">
								<img src="../img/car1.jpg" />
							</div>
							<p>奔驰v</p>
							<i class="iconfont icon-duihao"></i>
						</div>
					</div>
					<h3>填写信息</h3>
					<div class="infor">
						<div class="info-list clearfix">
							<div class="info-left">姓名</div>
							<div class="info-right">
								<input type="text" placeholder="请填写您的姓名,例如:李先生" />
								<span>（此项非必填）</span>
							</div>
						</div>
						<div class="info-list clearfix">
							<div class="info-left">称谓</div>
							<div class="select info-right">
								<div class=" fl">
									<input type="radio" value="先生" name="sex" checked="checked" /><span class="radiospan">先生</span>&nbsp;&nbsp;
								</div>
								<div class=" fl">
									<input type="radio" value="女士" name="sex" /><span class="radiospan">女士</span>
								</div>
							</div>
						</div>
						<div class="info-list clearfix">
							<div class="info-left">手机号码</div>
							<div class="info-right">
								<input type="text" placeholder="请填写您的姓名,例如:李先生" />
							</div>
						</div>
						<div class="info-list clearfix">
							<div class="info-left">所在省份</div>
							<div class="info-right rightselect">
								<select>
								  <option value ="volvo">请选择所在省份</option>
								  <option value ="saab">Saab</option>
								  <option value="opel">Opel</option>
								  <option value="audi">Audi</option>
								</select>
								<span class="iconfont icon-down-fill-xs"></span>
							</div>
						</div>
						<div class="info-list clearfix">
							<div class="info-left">所在城市</div>
							<div class="info-right rightselect">
								<select>
								  <option value ="volvo">请选择所在城市</option>
								  <option value ="saab">Saab</option>
								  <option value="opel">Opel</option>
								  <option value="audi">Audi</option>
								</select>
								<span class="iconfont icon-down-fill-xs"></span>
							</div>
						</div>
						<div class="info-list clearfix">
							<div class="info-left">计划购车时间</div>
							<div class="info-right rightselect">
								<select>
								  <option value ="volvo">请选择计划购车时间</option>
								  <option value ="saab">Saab</option>
								  <option value="opel">Opel</option>
								  <option value="audi">Audi</option>
								</select>
								<span class="iconfont icon-down-fill-xs"></span>
							</div>
						</div>
						<div class="info-list clearfix">
							<div class="info-left">希望得到反馈时间</div>
							<div class="select info-right">
								<div class=" fl">
									<input type="radio" value="全天" name="time" checked="checked" /><span class="radiospan">全天</span>&nbsp;&nbsp;
								</div>
								<div class=" fl">
									<input type="radio" value="工作日" name="time" /><span class="radiospan">工作日</span>&nbsp;&nbsp;
								</div>
								<div class=" fl">
									<input type="radio" value="双休" name="time" checked="checked" /><span class="radiospan">双休</span>
								</div>
							</div>
						</div>
						<input type="button" value="提交" class="submitInfor" />
					</div>
				</div>
			</div>


			<!-- 悬浮按钮 -->
			<div class="goTop">
				<img src="../img/top.png" />
			</div>


			<!-- 底部 -->
			<footer class="">
				<div class="foot-classify clearfix width1300">
					<div class="foot-nav">
						<h4>车型总鉴</h4>
						<p>奢石版</p>
						<p>v级系列</p>
						<p>斯宾特系列</p>
						<p>大众T6</p>
						<p>GMC</p>
						<p>豪华加长</p>
					</div>
					<div class="foot-nav">
						<h4>品牌天地</h4>
						<p>品牌中心</p>
						<p>关于我们</p>
						<p>赛事风采</p>
					</div>
					<div class="foot-nav">
						<h4>高级私人定制系列</h4>
						<p>限量发售</p>
						<p>车主故事</p>
					</div>
					<div class="foot-nav">
						<h4>售后服务</h4>
						<p>车主服务</p>
						<p>常见问与答</p>
						<p>原厂配件</p>
						<p>选装配件及精品</p>
					</div>
					<div class="foot-nav">
						<h4>新闻资讯</h4>
						<p>企业动态</p>
						<p>行业热点</p>
					</div>
				</div>
				<div class="companyInfo">
					<div class="width1300">
						<div class="company_name"></div>
						<div class="company-info clearfix">
							<div class="fl">杭州中诚汽车销售服务有限公司&nbsp;&nbsp;|&nbsp;&nbsp;<i>华东高端商务房车展销中心</i></div>
							<div class="fr">
								<div class="telphone fr clearfix">
									<img src="../img/tel.png" />
									<div class="num">热线电话<b>400-079-6969</b></div>
								</div>
								<p class="address">地址：浙江省杭州市下城区绍兴路2号</p>
								<p class="police clearfix"><img src="../img/police.png">浙公网安备33010302003582号</p>
							</div>
						</div>
					</div>
				</div>
			</footer>
		</div>
		<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript">

		</script>
	</body>
</html>
